<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>分享</title>
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
        <link rel="stylesheet" href="https://static.91haoka.cn/vant.css"/>
        <script src="https://static.91haoka.cn/vue.min.js"></script>
        <script src="https://static.91haoka.cn/vantall.js"></script>
        <script src="https://static.91haoka.cn/axios.min.js"></script>
		<link rel="stylesheet" type="text/css" href="https://static.91haoka.cn/all.css"/>
		<script src="js/q.js"></script>
		<script src="js/fuzhi.js"></script>
     </head>
    <style type="text/css">
		*{ box-sizing: border-box; font-family:'PingFang SC';}
		
    </style>
	<body>
        <div id="app" style="min-height: 100vh; background: rgb(243, 243, 245); padding-top: 0.2rem;" v-cloak>
			
			<div style="margin: 0.2rem; padding: 0.4rem; background: #fff; border-radius: 0.2rem; background: #fff;">
				
				<div class="flexbc" style="padding:0 0  0.4rem;">
					<div style="font-size: 0.28rem; width: 5rem;">店铺连接：{{url2}}</div>
					<div style="color: rgb(0, 124, 255); font-size: 0.28rem;" @click=fuzhi(url2)>复制</div>
				</div>
				
				<div>
					<div style="width: 200px; height: 200px; margin: 0 auto;">
						<div id="qrcode"></div>
					</div>
					<!-- <div style=" color: rgb(0, 124, 255); text-align: center; font-size: 14px; margin-top: 30px;" @click="baocun">保存二维码</div> -->
				</div>
			</div>
			
			
        </div>

       
        <script>
            var h = document.documentElement.clientWidth / 7.5 + 'px';
                document.documentElement.style.fontSize = h;

            
            new Vue({
                el: '#app',
                data: function() {
                	return {
                       url2:""
                	}
                },
                created(){

                },
                mounted () {
					this.url2 = "https://storep.91haoka.cn/h5/index.html?id="+this.getUrlParam('id')+"&source="+this.getUrlParam('source')
					var qrcode = new QRCode(document.getElementById('qrcode'), {
					    text: this.url2,
					    width: 200,
					    height: 200,
					    colorDark : "#000000",
					    colorLight : "#ffffff",
					    correctLevel : QRCode.CorrectLevel.H
					})
				},
                methods:{
					fuzhi:function(text){
						const clipboardData = window.clipboardData;
						if (clipboardData) {
						  clipboardData.clearData();
						  clipboardData.setData("Text", text);
						  return true;
						} else if (document.execCommand) {
						  const el = document.createElement("textarea");
						  el.value = text;
						  el.setAttribute("readonly", "");
						  el.style.position = "absolute";
						  el.style.left = "-9999px";
						  document.body.appendChild(el);
						  el.select();
						  document.execCommand("copy");
						  document.body.removeChild(el);
						  vant.Toast('已复制');
						  return true;
						}
						return false;
					},
					
					getUrlParam:function(name) {
					    var query = window.location.search.substring(1);
					    var vars = query.split("&");
					    for (var i=0;i<vars.length;i++) {
					            var pair = vars[i].split("=");
					            if(pair[0] == name){return pair[1];}
					    }
					    return(false);
					},
					baocun() {
							// 先找到canvas节点下的二维码图片
							const myCanvas = document.getElementById('qrcode').getElementsByTagName('canvas')
							const img = document.getElementById('qrcode').getElementsByTagName('img')
							// 创建一个a节点
							const a = document.createElement('a')
							// 设置a的href属性将canvas变成png格式
							const imgURL = myCanvas[0].toDataURL('image/jpg')
							const ua = navigator.userAgent
							if (ua.indexOf('Trident') !== -1 && ua.indexOf('Windows') !== -1) { // IE内核 并且  windows系统 情况下 才执行;
								var bstr = atob(imgURL.split(',')[1])
								var n = bstr.length
								var u8arr = new Uint8Array(n)
								while (n--) {
									u8arr[n] = bstr.charCodeAt(n)
								}
								const blob = new Blob([u8arr])
								window.navigator.msSaveOrOpenBlob(blob, '下载' + '.' + 'png')
							} else if (ua.indexOf('Firefox') > -1) { // 火狐兼容下载
								const blob = this.base64ToBlob(imgURL); //new Blob([content]);
								const evt = document.createEvent("HTMLEvents");
								evt.initEvent("click", true, true); //initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
								a.download = ' '; //下载图片名称，如果填内容识别不到，下载为未知文件，所以我这里就不填为空
								a.href = URL.createObjectURL(blob);
								a.dispatchEvent(new MouseEvent('click', {
									bubbles: true,
									cancelable: true,
									view: window
								}));
							} else { // 谷歌兼容下载
								img.src = myCanvas[0].toDataURL('image/jpg')
								a.href = img.src
								// 设置下载文件的名字
								a.download = '下单页二维码';
								// 点击
								a.click();
								vant.Toast('已保存');
							}
						},
			 
						// base64转blob
						base64ToBlob(code) {
							let parts = code.split(';base64,');
							let contentType = parts[0].split(':')[1];
							let raw = window.atob(parts[1]);
							let rawLength = raw.length;
							let uInt8Array = new Uint8Array(rawLength);
							for (let i = 0; i < rawLength; ++i) {
								uInt8Array[i] = raw.charCodeAt(i);
							}
							return new Blob([uInt8Array], {
								type: contentType
							});
						}
                }
            });

  
        </script>
	</body>
</html>
